<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery沿贝兹曲线和弧线运动特效 - 站长素材</title>
<link type="text/css" rel="stylesheet" media="screen" href="style.css"/>
<link rel="stylesheet" type="text/css" href="css/default.css">
<style>
.page{width: 800px;margin:0 auto;}
#arc { position: relative; width: 600px; height: 300px; }
#bezier { position: relative; width: 600px; height: 300px; }
#sine { position: relative; width: 600px; height: 300px; }
.pixel { position: absolute; width: 150px; height: 150px; background: red; -moz-border-radius: 75px; -webkit-border-radius: 75px; opacity: 0.5; filter: alpha(opacity=50); top: -15px; left: 185px;}
.dot {width: 1px; position: absolute; height: 1px; background: #aaa; }
a {  cursor: pointer;}
</style>
</head>
<body>
<div class="page">
	<h2>10条曲线</h2>
	<div id="arc">
	  <p><a class="start">开始动画</a> </p>
	  <p><a class="plot">Plot</a>  </p>
	</div>

	<h2>10条贝兹曲线</h2>
	<div id="bezier">
	  <p><a class="start">开始动画</a> </p>
	  <p><a class="plot">Plot</a>  </p>
	</div>
	
	<h2>自定义路径：正弦波</h2>
	<div id="sine">
	  <p><a class="start">开始动画</a> </p>
	  <p><a class="plot">Plot</a>  </p>
	</div>
	
  </div>

<script src="js/jquery.min-1.7.2.js" type="text/javascript"></script>
<script src='js/jquery.path.js'></script>
<script>
	var SineWave = function() {
	  this.css = function(p) {
		var s = Math.sin(p*20)
		var x = 500 - p * 300 
		var y = s * 50 + 150
		var o = ((s+2)/4+0.1)
		return {top: y + "px", left: x + "px", opacity: o}
	  } 
	};


	$().ready(function() {
	  

	  var Paths = {"arc":[], "bezier":[], "sine": []}
	  
	  var path_fns = {
		arc: function(i) {
		  return new $.path.arc({
			center: [285,185],	
				radius: 100,	
				start: -i*20,
				end: i*100,
				dir: (i%2) ? 1 : -1
		  })
		},
		bezier: function(i) {
		  var x = i%2 ? 1 : -1
		  return new $.path.bezier({
			start: { x:185, y:185, angle: i*20 * x},	
			end: {x:540,y:110, angle: i*10, length: i / 4.0}
		  })
		},
		sine : function() {
		  return new SineWave
		}
	  }
	  
	  for(var type in Paths) {

		for(var i=0; i<10; i++ ) {
		  if(type == "sine" && i != 9)
			continue
			
		  var path = path_fns[type](i)
		  Paths[type].push(path)

		  var css = {
			"backgroundColor": (i%2) ? "red" : "yellow", 
			width: 20*(1+i), 
			height: 20*(1+i), 
			"-moz-border-radius": 10*(1+i), 
			"-webkit-border-radius": 10*(1+i), 
			marginLeft: -10*(1+i), // offset the div, so center is at origin
			marginTop: -10*(1+i) 
		  }

		  var $$ = $("<span class=pixel></span>").css(css)

		  // initialize to start
		  $$.css(path.css(1))
		  $("#" + type).append($$)
		}
			
	  }

	  
	  
	  $(".start").click(function() {
		var i =0;
		var type = $(this).closest("div").attr("id")
		
		$("#" + type + " .pixel").each(function() {
		  $(this).stop().animate({path: Paths[type][i] }, 3000)
		  i++;
		})
	  })
	  
	  
	  $(".plot").click(function() {

		var $$ = $("<div>")
		var type = $(this).closest("div").attr("id")
		
		for(var t=0; t<1;t+= 0.01) {    
		  for(var i in Paths[type]) {
			var d = $("<span class=dot></span>").css(Paths[type][i].css(t))
			$$.append(d)
		  }
		}
		$("#" + type ).append($$) 
	  })

	  
	})

</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>